<template>
  <div>
    <div @tap.stop="$navigateTo('/pages/goods/store/detail?id=' + props.res.storeId)" v-if="props.res.storeName"
      mb-30rpx color-black flex flex-a-c flex-j-sb>
      <div text-28rpx font-bold flex flex-a-c>
        <span v-if="props.orderTypeWay" class="order-promotion" rounded-8rpx inline-block w-100rpx text-20rpx
          leading-32rpx text-center text-white mr-8rpx>
          <template v-if="props.res.orderPromotionType">{{ orderPromotionTypeList(props.res.orderPromotionType) }}</template>
          <template v-else>{{ orderTypeList(props.res.orderType) }}</template>
        </span>
        {{ props.res.storeName }} <nut-icon size="12" name="rect-right"></nut-icon>
      </div>
      <div text-26rpx :style="{ color: flagRed(props.res.orderStatus) ? colors.themeColor : '#999' }" font-400>
        {{ orderStatusList(props.res.orderStatus) }}
      </div>
    </div>
    <!-- 判断是否有orderItems -->
    <div v-if="!props.onlyStore">
      <div v-if="props.res.orderItems">
        <div v-for="(item, index) in props.res.orderItems" :key="index">
          <div @tap.nasyoptive="goodsDetail(props.res)">
            <!-- item.price || item.goodsPrice -->
            <column :price="props.res.flowPrice" :image="item.image || item.goodsImage || item.thumbnail"
              :res="item" :isOrder="true" :payPoint="props.payPoint">
              <template #body>
                <slot name="body" :index="index">

                </slot>
              </template>
              <template #footer>
                <slot name="footer" :index="index">

                </slot>
              </template>
            </column>
          </div>
          <div v-if="props.rate" mt-24rpx flex flex-a-c flex-j-sb bg-color color-gray-600 text-24rpx p-24rpx
            rounded-18rpx>
            <div>商品好不好，一键评分</div>
            <nut-rate v-model="item.rate" @change="score($event, index)" />
          </div>
        </div>

      </div>
      <!-- 没有orderItems -->
      <div v-else>
        <column :price="props.type==='afterSale'?props.res.applyRefundPrice:props.res.price || props.res.goodsPrice || props.res.flowPrice"
          :image="props.res.image || props.res.goodsImage || props.res.thumbnail" :res="props.res">
          <template #body>
            <slot name="body">

            </slot>
          </template>
          <template #footer>
            <slot name="footer">

            </slot>

          </template>

        </column>
        <slot name="footer-extra">

        </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import column from '@/components/goods-list/column.vue';
import { colors } from '@/constants/injection-key';
import { orderStatusList, orderTypeList, orderPromotionTypeList } from '@/utils/filters';
const props = defineProps<{
  res: any // 当前
  rate?: boolean
  onlyStore?: boolean,
  orderTypeWay?: boolean, // 是否展示订单类型
  type?: String,  // 当前类型(售后订单类型：afterSale)
  payPoint?: any, // 积分订单的积分
}>()
const emit = defineEmits(['onRate'])

function flagRed(val: any) {
  const list = ['UNDELIVERED', 'UNPAID', 'DELIVERED', 'TAKE']

  return list.includes(val)
}

function goodsDetail(item: any) {
  uni.navigateTo({
    url: `/pages/mine/order/detail?sn=${item.sn}`
  })
}


function score(val: number, index: number) {
  emit('onRate', {
    rate: val,
    _index: index,
    ...props.res,
  })
}
</script>

<style scoped lang="scss">
.order-promotion {
  background: $main-color;
  // font-weight: normal;
}
</style>
